<template>
	<view>
		<view class="dSLComVue">
			<view class="dSLComVueTop">
				<view class="dSLComVueTopLeft">
					<image src="@/static/icon_img/search.png" class="dSLComVueTopLeftImg"
						style="width: 30rpx;height: 30rpx;flex: none;"></image>
					<input class="dSLComVueTopLeftInput" v-model="search_input" type="text" :placeholder="placeholder"
						@blur="onClickInput" />
					<view class="dSLComVueTopLeftDel" v-if="search_input" @click="onClickDel">
						<image src="@/static/icon_img/del.png" class="dSLComVueTopLeftDelImg"
							style="width: 45rpx;height: 45rpx;flex: none;"></image>
					</view>
				</view>
				<view class="dSLComVueTopRight">
					<view class="dSLComVueTopRightBtn" @click="onClickInput"
						:style="'border: 1rpx solid '+color_border+';color: '+color_text+';'">
						{{search_name?search_name:'搜索'}}</view>
				</view>
			</view>
			<view class="dSLComVueTitle">
				<text>搜索历史</text>
				<view style="width: 100rpx;height: 60rpx;display: flex;align-items: center;justify-content: flex-end;"
					@click="onClickDelAll">
					<image src="@/static/icon_img/del2.png" style="width: 45rpx;height: 45rpx;margin-right: 35rpx;">
					</image>
				</view>
			</view>
			<view v-if="search_list_old.length==0" class="mytext">暂无</view>
			<view class="dSLComVueLog" v-if="search_list_old.length>0">
				<text class="dSLComVueLogBox mytext" v-for="(item,index) in search_list_old" :key="index">
					{{item?item:'无'}}
				</text>
			</view>
			<view class="dSLComVueTitle" v-if="search_list_hot.length>0" style="margin-top: 20rpx;">
				<text>热门搜索</text>
				<view style="width: 100rpx;height: 60rpx;display: flex;align-items: center;justify-content: flex-end;"
					@click="onClickShowHot">
					<image
						:src="is_hot_show?'https://s2.loli.net/2022/06/07/PTHosJ7XLdrlvuD.png':'https://s2.loli.net/2022/06/07/gmdSVKnGxw3zvbI.png'"
						style="width: 45rpx;height: 45rpx;margin-right: 35rpx;"></image>
				</view>
			</view>
			<view class="dSLComVueLog" v-if="search_list_hot.length>0 && is_hot_show">
				<text class="dSLComVueLogBox mytext" v-for="(item,index) in search_list_hot" :key="index" @click="shows">
					{{item?item:'无'}}
				</text>
			</view>
		</view>
		<view class="content" v-show="show">
			<view class="order-item" @click="goto">
				<view class="order-top">
					<view class="order-no">订单编号：452698415231</view>
					<view class="order-status-1">正在进行中</view>
				</view>
				<view class="good-box">
					<image
						src="https://img11.360buyimg.com/n1/jfs/t1/135257/32/22355/280244/61e90204E52ca6244/a5bc31c99ad3401e.jpg.avif"
						class="good-img">
					</image>
					<view class="good-info">
						<view class="good-title">
							尊福林 园艺工具套装家用种植工具箱种菜种花多肉松土铲子喷壶修枝剪刀组合园艺用品 园艺工具-10件套
						</view>
						<view class="good-bottom">
							当前拍卖价格：90元
						</view>
						<view class="good-time">
							截止剩余时间：
							<uni-countdown :font-size="14" :show-day="false" :hour="0" :minute="0" :second="0"
								color="#FFFFFF" background-color="#00D0D0" />
						</view>
					</view>
				</view>
			</view>
			<view class="order-item" @click="goto">
				<view class="order-top">
					<view class="order-no">订单编号：956412385643</view>
					<view class="order-status-2">已结束</view>
				</view>
				<view class="good-box">
					<image
						src="https://img14.360buyimg.com/n1/jfs/t1/214078/21/311/232262/6167d570E012daaed/43f3043ab9fad1a4.jpg.avif"
						class="good-img">
					</image>
					<view class="good-info">
						<view class="good-title">
							朔铠园艺工具套装种花剪养花工具箱家用阳台盆景栽花大号赶海小铲子盆栽花卉工具铲土用品修枝剪铁锹耙子锄头 花艺剪刀粉色
						</view>
						<view class="good-bottom">
							当前拍卖价格：10元
						</view>
						<view class="good-time">
							截止剩余时间：
							<uni-countdown :font-size="14" :show-day="false" :hour="15" :minute="24" :second="7"
								color="#FFFFFF" background-color="#00D0D0" />
						</view>
					</view>
				</view>
			</view>
			<view class="order-item" @click="goto">
				<view class="order-top">
					<view class="order-no">订单编号：956412385643</view>
					<view class="order-status-2">已结束</view>
				</view>
				<view class="good-box">
					<image
						src="https://img12.360buyimg.com/n1/jfs/t1/209095/23/723/143579/6141ff31E70061a2d/27cc1f463156512c.jpg.avif"
						class="good-img">
					</image>
					<view class="good-info">
						<view class="good-title">
							朔铠浇花喷壶家用小喷水壶园艺工具洒水壶气压式消毒喷雾器小型压力浇水壶高压喷雾瓶 2L加厚卡扣款粉色
						</view>
						<view class="good-bottom">
							拍卖价格：15元
						</view>
						<view class="good-time">
							截止剩余时间：
							<uni-countdown :font-size="14" :show-day="false" :hour="15" :minute="24" :second="7"
								color="#FFFFFF" background-color="#00D0D0" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				show: false,
				search_list_old: [],
				search_input: '',
				is_hot_show: true,
			}
		},
		created() {
			this._init_search()
		},
		props: {
			search_list_old_man_num: {
				value: Number,
				default: 10
			},
			search_list_hot: {
				value: Array,
				default: []
			},
			//HM修改 定义默认搜索关键词(水印文字)
			placeholder: {
				value: String,
				default: '请输入搜索内容'
			},
			store_key: {
				value: String,
				default: 'search_list'
			},

			color_border: {
				value: String,
				default: '#30c66c'
			},
			color_text: {
				value: String,
				default: '#30c66c'
			},
			search_name: {
				value: String,
				default: '搜索'
			},
		},
		watch: {
			search_list_hot(newVal) {
				if (newVal) {
					this.search_list_hot = newVal
				}
			},
		},
		methods: {
			goto: function() {
				uni.navigateTo({
					url: '/subpkg/detail/detail'
				})
			},
			onClickInput() {
				this.saveKeyword()
				this.show = true
			},
			_init_search() {
				var that = this
				var store_key = that.store_key
				uni.getStorage({
					key: store_key,
					success: (res) => {
						var OldKeys = JSON.parse(res.data);
						that.search_list_old = OldKeys; //更新历史搜索
					}
				});
			},
			saveKeyword() {
				var that = this
				if (!this.search_input) {
					return false;
				}
				this.search_input = this.search_input.toLowerCase()
				var search_input = this.search_input
				var store_key = that.store_key
				uni.getStorage({
					key: store_key,
					success: (res) => {
						var OldKeys = JSON.parse(res.data);
						var findIndex = OldKeys.indexOf(search_input);
						if (findIndex == -1) {
							OldKeys.unshift(search_input);
						} else {
							OldKeys.splice(findIndex, 1);
							OldKeys.unshift(search_input);
						}
						//最多10个纪录
						OldKeys.length > that.search_list_old_man_num && OldKeys.pop();
						uni.setStorage({
							key: store_key,
							data: JSON.stringify(OldKeys)
						});
						that.search_list_old = OldKeys; //更新历史搜索
					},
					fail: (e) => {
						var OldKeys = [search_input];
						uni.setStorage({
							key: store_key,
							data: JSON.stringify(OldKeys)
						});
						that.search_list_old = OldKeys; //更新历史搜索
					}
				});
				//	向父级发送搜索的事件
				that.$emit('onSearchNameApi', this.search_input);
			},
			onClickDel() {
				this.search_input = ''
			},
			onClickDelAll() {
				var that = this
				console.log('---全部删除-log--')
				uni.showModal({
					title: '提示',
					content: '确定全部删除',
					success(res) {
						if (res.confirm) {
							uni.removeStorageSync(that.store_key)
							that.search_list_old = []
							// console.log('______清除全部搜索记录______向上级发送事件')
							that.$emit('onClickDelAllApi', '');
						}
					}
				})
			},
			onClickShowHot() {
				this.is_hot_show = this.is_hot_show == true ? false : true
			},
			shows(){
				this.show = true
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		width: 740rpx;
		height: 340rpx;
		margin-top: 20rpx;
		margin-left: 3rpx;
		background: #d2fdff;
		border: 1px solid lightgrey;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.order-item .order-top {
		width: 670rpx;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-top .order-no {
		height: 44rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 44rpx;
		color: #686661;
		opacity: 1;
	}

	.order-top .order-status-0 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #F86341;
		opacity: 1;
	}

	.order-top .order-status-10,
	.order-top .order-status-1,
	.order-top .order-status-2 {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgb(61, 182, 10);
		opacity: 1;
	}

	.order-top .order-status-2 {
		color: red;
	}

	.order-top .order-status-3 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 44rpx;
		color: #B2B1AE;
		opacity: 1;
	}

	.order-item .good-box {
		width: 670rpx;
		height: 230rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-item .good-box .good-img {
		width: 230rpx;
		height: 230rpx;
		margin-top: -60rpx;
		border-radius: 16rpx;
	}

	.good-box .good-info {
		width: 420rpx;
		height: 220rpx;
		margin-top: -60rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.good-bottom {
		color: coral;
		font-size: 30rpx;
	}

	.good-info .good-title {
		width: 420rpx;
		height: 88rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 45rpx;
		color: #000000;
		opacity: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.good-info .good-time {
		color: black;
		font-size: 29rpx;
		display: flex;
		margin-top: -15rpx;
		justify-content: space-between;
		align-items: center;
	}

	.myborder {
		border: 1rpx solid #60DF9D;
		color: #30c66c;
	}

	.mytext {
		color: #8799a3;
	}

	.dSLComVue {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx 0;

		.dSLComVueTop {
			width: 90%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 40rpx;

			.dSLComVueTopLeft {
				flex: 1;
				height: 60rpx;
				background-color: #e8e8e8;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 3%;
				// background-color: #ccc;
				border: 1rpx solid #f2f2f2;

				.dSLComVueTopLeftImg {
					flex: 1;
					height: 80rpx;
				}

				.dSLComVueTopLeftInput {
					flex: 1;
					height: 60rpx;
					padding: 0 20rpx;

				}

				.dSLComVueTopLeftDel {
					width: 70rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}

			.dSLComVueTopRight {
				width: 100rpx;
				margin-left: 30rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.dSLComVueTopRightBtn {
					width: 120rpx;
					height: 60rpx;
					border-radius: 30rpx;
					// color: red;
					display: flex;
					// color: #ff00ff;
					// border:1rpx solid #ff00ff;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.dSLComVueTitle {
			width: 100%;
			height: 80rpx;
			display: flex;
			font-weight: 600;
			font-size: 26rpx;
			align-items: center;
			// background-color: #30c66c;
			align-items: center;
			justify-content: space-between;
			padding-left: 5%;
		}

		.dSLComVueLog {
			width: 90%;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.dSLComVueLogBox {
				line-height: 55rpx;
				background-color: #e8e8e8;
				padding: 0rpx 30rpx;
				border-radius: 30rpx;
				flex: none;
				margin: 10rpx 25rpx 15rpx 0;
				// border: 1rpx solid #ccc
			}
		}
	}
</style>
